<template>
	<view>
		<u-navbar title="G1010时刻表" back-icon-size='44' :background="background" title-color="#FFFFFF"
			:border-bottom='false' back-icon-color='#FFFFFF'></u-navbar>
		<view class="container">
			<view class="table">
				<view class="th">
					<view class="th-item" style="flex: 1.5;">
						车站名称
					</view>
					<view class="th-item" style="flex: 1;">
						到达
					</view>
					<view class="th-item" style="flex: 1;">
						出发
					</view>
					<view class="th-item" style="flex: 1;">
						停留
					</view>
				</view>
				<view class="tb" v-for="(item,index) in line">
					<view class="tb-item" style="flex: 1.5;" :style="{color:index==0?'#3587F7':'#666666'}">
						深圳北
					</view>
					<view class="tb-item" style="flex: 1;">
						11:25
					</view>
					<view class="tb-item" style="flex: 1;" :style="{color:index==0?'#3587F7':'#666666'}">
						11:25
					</view>
					<view class="tb-item" style="flex: 1;">
						5分钟
					</view>
				</view>
			</view>
		</view>
		
		<view class="sideLine" :style="{top:lineTop+'px'}">
			<view class="line" v-for="(item,index) in line1">
				<view class="circle" :class="{act:index == 0}">
					
				</view>
				<view class="dash">
				</view>
			</view>
			<view class="circle1">
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				line:[1,2,3,4],
				line1:[1,2,3],
				background: {
					backgroundColor: '#3587F7'
				},
				lineTop:0
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
						 that.lineTop = res.statusBarHeight + 114
						 console.log(that.lineTop)
			    }
			})
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.container {
		.table {
			.th {
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-bottom: 2rpx solid #F2F2F7;
				display: flex;
				align-items: center;
				padding-left: 70rpx;
				.th-item {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
				}
			}
			.tb {
				width: 100%;
				height: 88rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				padding-left: 70rpx;
				.tb-item {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
	
	.sideLine {
		position: fixed;
		left: 28rpx;
		.line{
			width: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.circle{
				width: 16rpx;
				height: 16rpx;
				background: #FFFFFF;
				border: 2rpx solid #3587F7;
				border-radius: 50%;
			}
			.act {
				width: 8px;
				height: 8px;
				background: #3587F7;
				border-radius: 50%;
			}
			.dash {
				width: 0rpx;
				height: 72rpx;
				border: 2rpx solid #DAEDF6;
			}
		}
		.circle1 {
			width: 16rpx;
			height: 16rpx;
			background: #DFDEE2;
			border-radius: 50%;
		}
	}
	
</style>
